<template>
	<view>
		<!-- 搜索框 -->
		<view class="searchContainer"> <my-search @searchClick="goToSearch"></my-search> </view>

		<!-- 轮播图 -->
		<swiper indicator-dots circular autoplay interval="3000" duration="1000">
			<swiper-item v-for="item in swiperList" :key="item.goods_id">
				<navigator :url="'/subGoods/details/details?goods_id=' + item.goods_id">
					<image :src="item.image_src" mode=""></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 导航栏 -->
		<view class="navContainer">
			<view v-for="(item, index) in navList" :key="index" @click="navSwitch(item.name)">
				<image :src="item.image_src" mode="" class="nav-img"></image>
			</view>
		</view>
		<!-- 楼层区 -->
		<view class="floorContainer">
			<view class="floorItem" v-for="(item, index) in floorList" :key="index">
				<!-- 楼层标题 -->
				<view class="floorTitle"> <image :src="item.floor_title.image_src" mode=""></image> </view>
				<!-- 楼层内容 -->
				<view class="floorContent">
					<!-- 左侧大图 -->
					<navigator class="leftImage" :url="'/subGoods/goodslist/goodslist?' + item.product_list[0].query">
						<image
							:src="item.product_list[0].image_src"
							:style="{ width: item.product_list[0].image_width + 'rpx' }"
							mode="widthFix"
						></image>
					</navigator>
					<!-- 右侧4张小图 -->
					<view class="rightImages">
						<navigator
							v-for="(item2, index2) in item.product_list"
							:key="index2"
							v-if="index2 !== 0"
							:url="'/subGoods/goodslist/goodslist?' + item2.query"
						>
							<image :src="item2.image_src" :style="'width:' + item2.image_width + 'rpx'" mode="widthFix"> </image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 导入设置购物车tab页的角标混入模块
import badgeMix from '@/mixins/tabbar-badge.js'

export default {
	mixins: [badgeMix],
	data() {
		return {
			swiperList: [],
			navList: [],
			floorList: []
		}
	},
	onLoad() {
		// 调用轮播图请求函数
		this.getSwiperList()
		// 调用导航栏数据请求函数
		this.getNavList()
		// 调用楼层区数据请求函数
		this.getFloorList()
	},
	methods: {
		// 定义轮播图请求函数
		async getSwiperList() {
			const { data } = await uni.$http.get('/api/public/v1/home/swiperdata')
			// 请求成功进行赋值，否则提示请求失败
			return data.meta.status === 200 ? (this.swiperList = data.message) : uni.$showMsg()
		},

		// 定义导航栏数据请求函数
		async getNavList() {
			const { data } = await uni.$http.get('/api/public/v1/home/catitems')
			// 请求成功进行赋值，否则提示请求失败
			return data.meta.status === 200 ? (this.navList = data.message) : uni.$showMsg()
		},

		// 定义导航栏点击事件回调
		navSwitch(name) {
			// 分类导航
			if (name === '分类') {
				uni.switchTab({
					url: '/pages/category/category'
				})
			}
			// 秒杀拍导航
			if (name === '秒杀拍') {
				uni.$showMsg('此功能暂未开发！')
			}
			// 超市购导航
			if (name === '超市购') {
				uni.$showMsg('此功能暂未开发！')
			}
			// 母婴品导航
			if (name === '母婴品') {
				uni.$showMsg('此功能暂未开发！')
			}
		},

		// 定义楼层区数据请求函数
		async getFloorList() {
			const { data } = await uni.$http.get('/api/public/v1/home/floordata')
			// 请求成功进行赋值，否则提示请求失败
			if (data.meta.status === 200) {
				// 由于数据中的每张图片对应的导航地址与本地不同，为获取它的查询参数，先处理再赋值到floorList
				data.message.forEach(item1 => {
					item1.product_list.forEach(item2 => {
						item2.query = item2.navigator_url.split('?')[1]
					})
				})
				this.floorList = data.message
			} else {
				uni.$showMsg()
			}
		},

		// 监听my-search组件的自定义事件searchClick
		goToSearch() {
			// 使用编程式导航跳转至搜索页
			uni.navigateTo({
				url: '/subGoods/search/search'
			})
		}
	}
}
</script>

<style lang="scss">
// 搜索框
.searchContainer {
	position: sticky;
	top: 0;
	z-index: 999; // 提高层级，防止被轮播图覆盖
}
// 轮播图
swiper {
	height: 330rpx;

	navigator,
	image {
		width: 100%;
		height: 100%;
	}
}

// 导航栏
.navContainer {
	display: flex;
	justify-content: space-around;
	margin: 15px 0;

	.nav-img {
		width: 128rpx;
		height: 140rpx;
	}
}

// 楼层区
// 楼层标题
.floorTitle image {
	height: 60rpx;
	width: 100%;
	display: block; // 解决图片与容器下方的空白
}

// 楼层内容
.floorContent {
	display: flex;
	justify-content: space-around;
	padding: 0 10rpx;
}

// 左侧大图
.leftImage image {
	vertical-align: middle;
}

// 右侧小图
.rightImages {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-left: 10rpx;
}

.rightImages image {
	display: block;
}
</style>
